<template>
	<up-navbar bgColor="transparent">
		<template #left>
			<view class="f-s-18 l-s-2 f-w-b ">
				德宝乒乓球
			</view>
		</template>
	</up-navbar>

	<u-sticky :zIndex="9">
		<view class="_header" :style="{
			paddingTop: `${bottom + 10 }px`
		}" />
	</u-sticky>
	<view class="_area">
		<up-swiper indicator="5000" :display-multiple-items="0" :radius="8" :height="160" key-name="image"
			:list="info.banner" circular></up-swiper>
		<card v-if="info.isFollow=='N'">
			<view class="u-flex u-flex-between u-flex-items-center">
				<view class="u-flex u-flex-items-center">
					<up-avatar size="60" src="https://images.debaoppq.cn/a185297eb430414fb73e2e4004a0fd3c.png"></up-avatar>
					<view class="u-m-l-16">
						<view class="f-s-16 f-w-b">德宝乒乓</view>
						<view class="u-info f-s-12 u-m-t-12">即时探索最新资讯</view>
					</view>
				</view>
				<view>
					<up-button color="#3c9cff" icon="weixin-fill" size="small" text="即刻关注" plain @click="goFollow" :customStyle="{borderRadius:'8px'}"></up-button>
				</view>
			</view>
		</card>	
		<area-card :top="20" :bottom="0" more title="热门教练" @more-data="moreCoach">
			<up-scroll-list :indicator="false" v-if="info.coach.length>0">
				<block v-for="coach in info.coach" :key="coach.id">
					<coach-index :coach="coach"></coach-index>
				</block>
			</up-scroll-list>
			<EmptyData v-else text="暂无教练" paddingTop="24rpx"></EmptyData>
		</area-card>
		<area-card :top="20" :bottom="0" more title="优秀学员" @more-data="moreStudent">
			<view class="ranking_card" v-if="info.student.length>0">
				<block v-for="(item,index) in info.student" :key="item.id">
					<view class="u-flex u-flex-between u-flex-items-center">
						<view class="u-flex u-flex-items-center">
							<image src="../static/imgs/one.png" style="width: 32px;" mode="widthFix" v-if="index==0">
							</image>
							<image src="../static/imgs/two.png" style="width: 32px;" mode="widthFix" v-if="index==1">
							</image>
							<image src="../static/imgs/three.png" style="width: 32px;" mode="widthFix" v-if="index==2">
							</image>
							<view class="u-flex u-m-l-14" >
								<up-avatar size="42" :src="item.image"></up-avatar>
								<view class="u-m-l-16">
									<view class="u-flex u-flex-items-center">
										<view class="f-s-14">{{item.name}}</view>
										<view class="f-s-12 u-m-l-24">实战分数:&nbsp;<text class="c-warning">{{item.fraction}}</text></view>
									</view>
									<view class="f-s-12 u-m-t-14 u-line-1">{{item.record}}</view>
								</view>
							</view>
						</view>
					</view>
					<up-line margin="24rpx 0" color="#f3f4f5" v-if="index <2 && info.student.length>1"></up-line>
				</block>
			</view>
			<EmptyData v-else text="暂无优秀学员" paddingTop="24rpx"></EmptyData>
		</area-card>
		<area-card :top="20" :bottom="0" title="场馆预订">
			<block v-if="info.stadium.length>0" v-for="_studium in info.stadium" :key="_studium.id">
				<stadium-card-home :stadium="_studium" />
			</block>
			<EmptyData v-else text="暂无场馆" paddingTop="24rpx"></EmptyData>
		</area-card>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import EasyCoach from '@/components/EasyCoach.vue';
	import CoachIndex from '@/components/CoachIndex.vue';
	import MartchCardHome from '@/components/MatchCardHome.vue';
	import StadiumCardHome from '@/components/StadiumCardHome.vue';
	import AreaCard from '@/components/AreaCard.vue';
	import EmptyData from '@/components/EmptyData.vue';
	import store from '@/store/index.js';
	import card from '@/components/common_card_three.vue'
	import {
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		indexData
	} from '@/api/index.js';

	import {
		signIn
	} from '@/api/signIn.js'

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		showConfirm
	} from '@/utils/common.js';
	const signStatus = ref(false)
	const cardId = ref(null)
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const info = ref({
		banner: [],
		coach: [],
		stadium: [],
		student: []
	})

	onLoad((options) => {
		if (options.q) {
			let url = decodeURIComponent(options.q)
			//对url进行解码
			cardId.value = url.match(/cardId=(\S*)/)[1]
			signIn(cardId.value).then(res => {
				signStatus.value = res.data
				show.value = true;
			})
		}
	})
	onShow(() => {
		// 首页数据获取
		indexData().then(resp => {
			info.value = resp.data
		})
	})
	
	function bindload(e) {
		console.log(e)
	}
	function binderror(e) {
		console.log(e)
	}
	const moreCoach = () => {
		uni.switchTab({
			url: '/pages/coach'
		})
	}
	const moreStudent = () => {
		uni.navigateTo({
			url: '/subPackages/student/index'
		})
	}
	onShareAppMessage(() => {
		return {
			title: '德宝乒乓球-' + '首页',
		}
	})
	onShareTimeline(() => {
		return {
			title: '德宝乒乓球-' + '首页',
		}
	})

	function close() {
		show.value = false;
	}
	//去关注公众号
	function goFollow(){
		uni.navigateTo({
			url:'/pages/follow'
		})
	}
</script>

<script>

</script>

<style lang="scss">
	page{
		background-color: #fff !important;
	}
	._header {
		background-image: url(https://images.debaoppq.cn/f3894d4ce0394b08baf207af92985d02.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	._area {
		padding: 0 32rpx 32rpx;

		.ranking_card {
			//四周阴影
			background-color: #fff;
			box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
			border-radius: 8px;
			padding: 32rpx;

		}
	}
	.hot-coach-box {
		display: grid;
		grid-template-columns: 1fr 1fr; // 2列，每列1fr（fraction 分数）的宽度，即平分剩余空间。
		grid-gap: 12px;
	}
</style>